<template>
  <h2>sum:{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>{{ hello }}</h2>
  <button @click="hello+='!'">点我加感叹号</button>
  <hr>
  <h2>name:{{ person.name }}</h2>
  <h2>age:{{ person.age }}</h2>
  <h3>薪资：{{ person.job.j.salary }}k</h3>
  <h3>工作：{{ person.job.j.name }}</h3>
  <button @click="person.name+='~'">点我变温柔</button>
  <button @click="person.age++">点我更改年龄</button>
  <button @click="person.job.j.salary++">点我加薪</button>
</template>

<script>
import { ref,reactive, watch } from 'vue';
export default {
  name:'App',
  setup(){
    let sum = ref(0)
    let hello = ref('你好')
    let person = reactive({
      name:'张扬',
      age:'22',
      job:{
        j:{
          salary:20,
          name:'前端'
        }
      }
    })

    // 监听单一ref定义的数据
    // watch(sum,(newValue,oldValue)=>{
    //   console.log('sum变了',newValue,oldValue)
    // })

    // 监听多组ref定义的数据
    // watch([hello,sum],(newValue,oldValue)=>{
    //   console.log('该组数据变了',newValue,oldValue)
    // })

    // 监听含有多层数据的对象 (1.自动深度监听 2.无法正确获取oldValue)
    watch(person,(newValue,oldValue)=>{
      console.log('person变了',newValue,oldValue)
    })

    // 监视深层对象中的某一个数据 该数据要用函数返回
    // watch(()=>person.job.salary,(newValue,oldValue)=>{
    //   console.log('薪资变了',newValue,oldValue)
    // })

    // 监视深层数据中的某一些数据 同理用数组包裹每一个用函数返回的数据
    // watch([()=>person.age,()=>person.job.salary,()=>person.name],(newValue,oldValue)=>{
    //   console.log('这些数据改变了',newValue,oldValue)
    // })

    // 特殊情况
    // watch(()=>person.job,(newValue,oldValue)=>{
    //   console.log('job改变了',newValue,oldValue)
    // },{deep:true})

    return {
      sum,
      hello,
      person
    }
  }
}
</script>

<style>

</style>